<template>
  <div class="app">
    <div class="menu" @mouseleave="handleMouseLeave">

      <el-menu class="el-menu"
               @select="handleSelect"
               :router="true"
               :collapse="isCollapse" :collapse-transition="true">
        <el-menu-item class="first_item" @click="menuClick">
          <el-image class="menu_icon" style="width: 35px; height: 35px" :src="iconUrl"></el-image>
        </el-menu-item>

        <el-menu-item class="head_img" @click="goPersonalHomePage" v-if="!isCollapse">
          <el-avatar :size="80" :src="head_img_url" @error="errorHandler"></el-avatar>
        </el-menu-item>

        <el-menu-item v-for="item in menu.aloneItem" :key="item.url" :index="item.url" @click="updateMenu()">
          <el-image class="iconPic" :src="item.icon"/>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>

        <el-submenu v-for="group in menu.groupItem" :key="group.url" :index="group.url">
          <template slot="title">
            <el-image class="iconPic" :src="group.icon"/>
            <span slot="title">{{ group.name }}</span>
          </template>
          <el-menu-item v-for="item in group.children" :key="item.url" :index="item.url" @click="updateMenu()">
            <el-image class="iconPic" :src="item.icon"/>
            {{ item.name }}
          </el-menu-item>
        </el-submenu>

        <el-menu-item @click="checkOut()">
          <el-image class="iconPic" src="/img/icon/checkOut.png"></el-image>
          <span slot="title">注销登录</span>
        </el-menu-item>

      </el-menu>
    </div>
    <div class="main">
      <div class="header">
        <div class="header_path">
          <el-page-header @back="goBack" title="首页" :content="path">
          </el-page-header>
        </div>
        <!--        <div class="header_tag">-->
        <!--          <span></span>-->
        <!--        </div>-->
      </div>
      <div class="body">
        <router-view/>
      </div>

    </div>
  </div>
</template>

<script>
import axios from "@/Axios/axios";
import FingerprintJS from '@fingerprintjs/fingerprintjs';

export default {
  data() {
    return {
      isCollapse: true,
      iconUrl: '/img/icon/menu_grey.png',
      head_img_url: '',
      path: '',
      menu: {},
      fingerprint: null,
      adminMenu:
          {
            personalHomePage:
                {name: '个人主页', url: '/personalHomePage', icon: ''},
            aloneItem: [
              {name: '首页', url: '/adminHomePage', icon: '/img/icon/userPageHome.png'},
            ],
            groupItem: [
              {
                name: '用户管理',
                url: '/admin/user',
                icon: 'img/icon/userManage.png',
                children: [
                  {name: '用户列表', url: '/userManage', icon: '/img/icon/userList.png'},
                ]
              },
              {
                name: '系统配置',
                url: '/admin/system',
                icon: 'img/icon/setting.png',
                children: [
                  {name: '首页图片配置', url: '/homePageImgSet', icon: '/img/icon/pic.png'},
                  {name: '记账类型配置', url: '/billTypeManage', icon: '/img/icon/bill.png'},
                  {name: '素材库配置', url: '/materialLibrary', icon: '/img/icon/material.png'},
                ]
              }
            ],
          },
      userMenu:
          {
            personalHomePage:
                {name: '个人主页', url: '/personalHomePage', icon: ''},
            aloneItem: [
              {name: '首页', url: '/userHomePage', icon: '/img/icon/userPageHome.png'},
              {name: '记账', url: '/bill', icon: '/img/icon/bill.png'},
            ],
            groupItem: [],
          },
    }
  },
  methods: {
    handleSelect() {
      this.isCollapse = true;
      this.iconUrl = '/img/icon/menu_grey.png';
      this.updateMenu();
    },
    menuClick() {
      if (this.isCollapse) {
        this.isCollapse = false
        this.iconUrl = '/img/icon/menu_blue.png'
      } else {
        this.isCollapse = true
        this.iconUrl = '/img/icon/menu_grey.png'
      }
    },
    updateMenu() {
      setTimeout(() => {
        this.path = '';
        let path = this.$route.path;
        let menu = this.menu;
        let pathName = '';
        let flag = false;
        if (path === menu.personalHomePage.url) {
          pathName = menu.personalHomePage.name;
          flag = true;
        } else {
          menu.groupItem.forEach(item => {
            if (item.children.length === 1 && item.children[0].url === path) {
              pathName = item.name + '/' + item.children[0].name;
              flag = true;
            } else {
              item.children.forEach(child => {
                if (child.url === path) {
                  pathName = item.name + '/' + child.name;
                  flag = true;
                }
              });
            }
          });
        }
        if (pathName === '') {
          menu.aloneItem.forEach(item => {
            if (item.url === path) {
              pathName = item.name;
              flag = true;
            }
          });
        }
        this.path = flag ? pathName : '';
      }, 50);
    },
    goBack() {
      // this.$router.go(-1);
      sessionStorage.getItem('identity') === '1' ? this.$router.push('/adminHomePage') : this.$router.push('/userHomePage');
      this.updateMenu();
    },
    errorHandler() {
      return true;
    },
    getHeadImg() {
      axios.get('/admin/userManage/headImg').then(res => {
        if (res.code === 200) {
          this.head_img_url = res.data;
        } else {
          this.$message.error("头像获取失败");
        }
      }).catch(() => {
      })
    },
    goPersonalHomePage() {
      this.$router.push('/personalHomePage')
      this.iconUrl = '/img/icon/menu_grey.png'
      this.updateMenu();
    },
    async checkOut() {
      await this.getFingerprint();
      this.$confirm('是否确认注销登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let fingerPrint = this.fingerprint;
        try {
          await axios.get("system/logout/" + fingerPrint);
        } catch (error) {
          console.error('注销失败', error);
        } finally {
          sessionStorage.removeItem('token');
          sessionStorage.removeItem('identity');
          await this.$router.push('/'); // 确保跳转到首页
        }
      }).catch(() => {
        console.log('用户取消了注销操作');
      });
    },
    handleMouseLeave() {
      this.isCollapse = true;
      this.iconUrl = '/img/icon/menu_grey.png';
    },
    async getFingerprint() {
      const fp = await FingerprintJS.load();
      const result = await fp.get();
      this.fingerprint = result.visitorId;
    },
  },
  mounted() {
    this.getHeadImg();
  },
  created() {
    this.menu = sessionStorage.getItem('identity') === '1' ? this.adminMenu : this.userMenu;
    this.updateMenu();
  }
}
</script>

<style scoped>

.app {
  width: 100%;
  height: 100%;
  display: flex;
}

.menu {
  height: 100%;
  width: 64px;
  position: fixed;
  z-index: 999;
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.2);
}

.el-menu {
  overflow-y: auto;
  overflow-x: hidden;
}

.el-menu::-webkit-scrollbar {
  display: none;
}

.header {
  height: 33px;
}

.header_path {
  height: 33px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.el-page-header {
  height: 33px;
  line-height: 33px;
}

.header_tag {
  height: 33px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  line-height: 200%;
}

.header >>> .el-page-header__content {
  font-family: cursive;
}

.main {
  width: calc(100% - 64px);
  margin-left: 64px;
}

.backHome {
  cursor: pointer;
}

.el-menu:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}

.el-menu--collapse {
  height: 100%;
}

.first_item:hover {
  background-color: #fff !important;
}

.menu_icon:hover {
  background-color: #e5ebf3;
}

.head_img {
  height: 80px;
  text-align: center;
}

.head_img:hover {
  background-color: #fff !important;
}

.iconPic {
  width: 23px;
  height: 23px;
  margin-right: 5px;
}

</style>